<template>
	<!-- 救援记录 -->
	<CustomNavbar>
		<view class="navbar-content">
			<!-- 左侧返回按钮 -->
			<view class="nav-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<!-- 中间标题 -->
			<view class="nav-title">{{ pageTitle }}</view>
			<!-- 右侧图标 -->
			<view class="nav-right">
				<text class="nav-icon-dots">⋯</text>
				<view class="nav-divider"></view>
				<view class="nav-icon-target">
					<view class="target-outer"></view>
					<view class="target-inner"></view>
				</view>
			</view>
		</view>
	</CustomNavbar>

	<!-- 救援记录列表 -->
	<view class="record-container">
		<view class="record-list">
			<view class="record-card" v-for="(item, index) in recordList" :key="index">
				<!-- 顶部：救援类型和日期 -->
				<view class="card-header">
					<text class="rescue-type">{{ item.type }}</text>
					<text class="rescue-date">{{ item.date }}</text>
				</view>
				<!-- 详细信息 -->
				<view class="card-details">
					<view class="detail-row">
						<text class="detail-label">订单编号:</text>
						<text class="detail-value">{{ item.orderNo }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">位置:</text>
						<text class="detail-value">{{ item.location }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">车牌:</text>
						<text class="detail-value">{{ item.plate }}</text>
					</view>
					<!-- 拖车类型显示起点和终点 -->
					<template v-if="item.type === '拖车'">
						<view class="detail-row">
							<text class="detail-label">起点:</text>
							<text class="detail-value">{{ item.startLocation }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">终点:</text>
							<text class="detail-value">{{ item.endLocation }}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 救援类型
	const rescueType = ref('')

	// 页面标题（根据救援类型动态变化）
	const pageTitle = computed(() => {
		if (rescueType.value) {
			return `${rescueType.value}记录`
		}
		return '救援记录'
	})

	// 返回按钮
	const goBack = () => {
		uni.navigateBack()
	}

	// 救援记录数据（示例数据）
	const allRecords = [{
			type: '换胎',
			date: '2023-02-15',
			orderNo: '121212112487878',
			location: '洛阳市道北路32号XXX小区',
			plate: '奔驰FWE4/豫A98FHJ'
		},
		{
			type: '拖车',
			date: '2023-02-14',
			orderNo: '121212112487879',
			location: '洛阳市道北路32号XXX小区',
			plate: '奔驰FWE4/豫A98FHJ',
			startLocation: '洛阳市道北路32号',
			endLocation: '洛阳市西工区解放路88号'
		},
		{
			type: '搭电',
			date: '2023-02-13',
			orderNo: '121212112487880',
			location: '洛阳市道北路32号XXX小区',
			plate: '奔驰FWE4/豫A98FHJ'
		},
		{
			type: '换胎',
			date: '2023-02-12',
			orderNo: '121212112487881',
			location: '洛阳市道北路32号XXX小区',
			plate: '奔驰FWE4/豫A98FHJ'
		},
		{
			type: '拖车',
			date: '2023-02-11',
			orderNo: '121212112487882',
			location: '洛阳市道北路32号XXX小区',
			plate: '奔驰FWE4/豫A98FHJ',
			startLocation: '洛阳市道北路32号',
			endLocation: '洛阳市西工区解放路88号'
		},
		{
			type: '搭电',
			date: '2023-02-10',
			orderNo: '121212112487883',
			location: '洛阳市道北路32号XXX小区',
			plate: '奔驰FWE4/豫A98FHJ'
		}
	]

	// 过滤后的记录列表
	const recordList = computed(() => {
		if (rescueType.value) {
			return allRecords.filter(record => record.type === rescueType.value)
		}
		return allRecords
	})

	// 页面加载时获取救援类型参数
	onLoad((options) => {
		if (options.type) {
			rescueType.value = options.type
		}
	})
</script>

<style scoped>
	/* 导航栏内容样式 */
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		position: relative;
		margin: 0 -24rpx;
		padding: 0 24rpx;
	}

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 88rpx;
	}

	.back-icon {
		color: #fff;
		font-size: 56rpx;
		font-weight: 300;
		line-height: 88rpx;
		transform: scaleY(1.3);
		cursor: pointer;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 88rpx;
	}

	.nav-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 16rpx;
		height: 88rpx;
	}

	.nav-icon-dots {
		color: #fff;
		font-size: 48rpx;
		line-height: 88rpx;
		font-weight: 300;
		transform: rotate(90deg);
	}

	.nav-divider {
		width: 2rpx;
		height: 32rpx;
		background-color: rgba(255, 255, 255, 0.7);
	}

	.nav-icon-target {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.target-outer {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: absolute;
	}

	.target-inner {
		width: 12rpx;
		height: 12rpx;
		background-color: #fff;
		border-radius: 50%;
		position: absolute;
	}

	/* 记录容器 */
	.record-container {
		background-color: #f5f5f5;
		min-height: calc(100vh - 176rpx);
		padding: 20rpx;
		padding-bottom: 40rpx;
		position: absolute;
		top: 200rpx;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.record-list {
		padding: 0;
	}

	/* 救援记录卡片 */
	.record-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	/* 卡片顶部：救援类型和日期 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.rescue-type {
		font-size: 32rpx;
		color: #2f80ed;
		font-weight: bold;
		line-height: 44rpx;
	}

	.rescue-date {
		font-size: 24rpx;
		color: #999999;
		line-height: 44rpx;
	}

	/* 详细信息 */
	.card-details {
		display: flex;
		flex-direction: column;
		border-top: 2px solid #eee;
		padding-top: 10rpx;
		box-sizing: border-box;
	}

	.detail-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 12rpx;
	}

	.detail-row:last-child {
		margin-bottom: 0;
	}

	.detail-label {
		font-size: 28rpx;
		color: #666666;
		width: 140rpx;
		flex-shrink: 0;
		line-height: 40rpx;
	}

	.detail-value {
		font-size: 28rpx;
		color: #666666;
		flex: 1;
		line-height: 40rpx;
	}
</style>